import React, { useEffect, useState } from "react";
import { Space, Table, Tag, Select, Button } from "antd";
import type { TableProps } from "antd";
import axios from "axios";

const Index: React.FC = () => {
  const [list, setList] = useState<any>([]);
  interface DataType {
    key: string;
    img: string;
    title: number;
    kj: string;
    fg: string;
    pl: string;
  }

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "Img",
      dataIndex: "img",
      key: "img",
      render: (record: any) => {
        return (
          <div>
            <img src={record} />
          </div>
        );
      },
    },
    {
      title: "Title",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "KJ",
      dataIndex: "kj",
      key: "kj",
    },
    {
      title: "FG",
      dataIndex: "fg",
      key: "fg",
    },
    {
      title: "PL",
      dataIndex: "pl",
      key: "pl",
    },
  ];

  const data: DataType[] = list;
  const render = () => {
    axios.get("/api/list").then((resp) => {
      console.log(resp.data.list);
      setList(resp.data.list);
    });
  };
  useEffect(() => {
    render();
  }, []);
  let [ssCount, setSsCount] = useState<any>([]);
  // 空间
  let [kj, setKj] = useState<any>([]);
  // 风格
  let [fg, setFg] = useState<any>([]);
  // 品类
  let [pl, setPl] = useState<any>([]);

  const handleChangeOne = (value: string) => {
    if (kj.includes(value)) {
      return null;
    } else {
      kj.push(value);
    }
  };
  const handleChangeTwo = (value: string) => {
    if (fg.includes(value)) {
      return null;
    } else {
      fg.push(value);
    }
  };
  const handleChangeThree = (value: string) => {
    if (pl.includes(value)) {
      return null;
    } else {
      pl.push(value);
    }
  };
  const qd = () => {
    ssCount.concat(kj, fg, pl);
    let items = JSON.stringify(ssCount.concat(kj, fg, pl));
    axios.get("/api/search", { params: { items } }).then((resp) => {
      setList(resp.data.items);
    });
  };

  const cz = () => {
    axios.get("/api/list").then((resp) => {
      setList(resp.data.list);
    });
    window.location.reload();
  };
  return (
    <div>
      <div>
        <div>
          空间
          <Select
            defaultValue="不限"
            style={{ width: 120 }}
            onChange={handleChangeOne}
            options={[
              { value: "不限", label: "不限" },
              { value: "客厅", label: "客厅" },
              { value: "卧室", label: "卧室" },
              { value: "餐厅", label: "餐厅" },
              { value: "厨房", label: "厨房" },
              { value: "卫生间", label: "卫生间" },
              { value: "书房", label: "书房" },
            ]}
          />
          <Button onClick={() => qd()}>确定</Button>
          <Button onClick={() => cz()}>重置</Button>
        </div>
        <div>
          风格
          <Select
            defaultValue="不限"
            style={{ width: 120 }}
            onChange={handleChangeTwo}
            options={[
              { value: "不限", label: "不限" },
              { value: "现代简约风", label: "现代简约风" },
              { value: "北欧风", label: "北欧风" },
              { value: "奶油风", label: "奶油风" },
              { value: "后现代风", label: "后现代风" },
              { value: "原木风", label: "原木风" },
              { value: "日式风", label: "日式风" },
            ]}
          />
        </div>
        <div>
          品类
          <Select
            defaultValue="不限"
            style={{ width: 120 }}
            onChange={handleChangeThree}
            options={[
              { value: "不限", label: "不限" },
              { value: "硬装", label: "硬装" },
              { value: "家具", label: "家具" },
              { value: "灯具", label: "灯具" },
              { value: "家饰", label: "家饰" },
              { value: "全屋定制", label: "全屋定制" },
              { value: "电器", label: "电器" },
            ]}
          />
        </div>
      </div>
      <Table columns={columns} dataSource={data} />
    </div>
  );
};
export default Index;
